<template>
  <div class="main">
    <main-header
      class="header"
      v-show="headerShow"
      @handleClickByNullRouter="handleClickByNullRouter"
    ></main-header>
    <rescueDialog
      ref="rescueDialogRef"
      :geolocation="geolocation"
      :rescueHotline="rescueHotline"
    ></rescueDialog>

    <router-view class="routerView"></router-view>
  </div>
</template>

<script setup lang="ts">
import { getCurrentPositionsByBaiDui, type addressComponents } from "@/utils/getCurrentPosition"
import rescueDialog from "./cnps/rescue-dialog.vue"
import { ref, watchEffect } from "vue"
import { useRouter } from "vue-router"
import useUserStore from "@/store/user/user"
import { storeToRefs } from "pinia"

const headerShow = ref(true)

const userStore = useUserStore()
const { rescueHotline } = storeToRefs(userStore)

const router = useRouter()

// 使用watchEffect收集响应式依赖，
// 当router.currentRoute.value值改变时，判断并显示header
watchEffect(() => {
  if (router.currentRoute.value.fullPath === "/main/home") {
    headerShow.value = true
  } else {
    headerShow.value = false
  }
})

// 获取aside-bar组件的实例
/*
  直接这样ref<asideBar>()是不行的，asideBar是一个值
  asideBarRef保存的是asideBar组件创建出来的实例的类型

  组件虽然写的时候是export default {}，但导出的东西可以看成是一个构造器，
   > 其实InstanceType传入是是构造器类型，
     获取的是构造器的返回值【即实例】作为类型
*/

const rescueDialogRef = ref<InstanceType<typeof rescueDialog>>()
let geolocation = ref<addressComponents>({
  city: "",
  district: "",
  province: "",
  street: "",
  streetNumber: ""
})
/* 当导航没路由做处理 */
function handleClickByNullRouter() {
  // console.log("handleClickByNullRouter")
  console.log(rescueDialogRef.value!.dialogRef!.showDialog)

  getCurrentPositionsByBaiDui().then((res) => {
    geolocation.value = res.addressComponents

    userStore.getUserRescueHotline(geolocation.value.province.slice(0, -1)).then((res) => {
      console.log(res)
    })

    // 显示弹窗
    rescueDialogRef.value!.dialogRef!.showDialog = true
    // console.log(res)
  })
}
</script>

<style lang="less" scoped>
.header {
  position: fixed;
  top: 0;
  z-index: 100;
}

.routerView {
  z-index: 1;
}
</style>
